<template>
  <back-ground />
  <div class="container">
    <!-- 用户部分 -->
    <div class="user-info">
      <div class="user-head">
        <el-avatar :size="60" class="headimage" :src="user.headImage" />
      </div>
      <div class="user-name">{{user.nickName}}</div>
      <input style="position: fixed;left:10000000px" type="text" id="copyname">
      <div class="user-copyname" @click="copyname">
        <el-icon>
          <CopyDocument />
        </el-icon>
      </div>
    </div>
    <div class="content-one" @click="toLikeFan()">
      <el-row>
        <el-col :span="8" :offset="0">
          <div>{{num.lookNum}}</div>
          <div>浏览</div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>{{num.likeNum}}</div>
          <div>关注</div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>{{num.fanNum}}</div>
          <div>粉丝</div>
        </el-col>
      </el-row>
    </div>

    <div class="content-two">
      <el-row>
        <el-col :span="24">
          <el-input disabled v-model="user.personality" :rows="5" type="textarea" placeholder="无"
            :autosize="{ minRows: 1, maxRows: 5 }" />
        </el-col>
      </el-row>
      <div class="row-line"></div>
      <div class="row-line"></div>
      <el-row class="row-tag">
        <el-col :span="24">
          <el-tag v-show="user.sex=='女'" class="tag" effect="dark" type="info"
            :color="'pink'">女<el-icon>
              <Female />
            </el-icon>
          </el-tag>
          <el-tag v-show="user.sex=='男'" class="tag" effect="dark" type="info"
            :color="'#0fc9e4a6'">男<el-icon>
              <Male />
            </el-icon>
          </el-tag>
          <!-- <el-tag class="tag" effect="dark" type="info">快乐
          </el-tag>
          <el-tag class="tag" effect="dark" type="info">福建.厦门
          </el-tag>
          <el-tag class="tag" effect="dark" type="info">厦门大学
          </el-tag> -->
        </el-col>
      </el-row>
      <div class="row-line"></div>
      <div class="row-line"></div>
      <el-row :gutter="10" class="row-button">
        <el-col :span="12" v-show="MyId!=user.id">
          <el-button v-if="!isFan" class="button1" type="primary" @click="addFan()">关注+
          </el-button>
          <el-button v-if="isFan" class="button1" type="danger" @click="deleteFan()">取关-
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-button v-show="MyId!=user.id" class="button1" type="info" @click="toMessageInfo">私信
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content-three">
      <el-row>
        <el-col>
          <!-- 这里在eltab加了v-infinite-scroll这个标签 页面就出问题了 销毁不了 -->
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch="true">
            <el-tab-pane label="作品" name="1">
              <div v-show="worksList.length<1">空空如也...</div>
              <van-grid :gutter="2" :column-num="3">
                <van-grid-item v-for="works in worksList" :key="works.id" v-show="works.state==1">
                  <div class="view-item" @click="preview(works.id)">
                    <el-image :src="minioUrl+works.fimg" fit="cover" style="width:100%;height:100%">
                    </el-image>
                    <div v-show="works.state==1" class="view-item-bottom">
                      <span class="tulin tulin-view"></span>
                      {{works.view}}
                      <span class="tulin tulin-like"></span>
                      {{works.like}}
                    </div>
                  </div>
                </van-grid-item>
              </van-grid>
            </el-tab-pane>
            <el-tab-pane label="相册" name="2">
              <div v-show="albumList.length<1">空空如也...</div>
              <van-grid :gutter="2" :column-num="3">
                <van-grid-item v-for="album in albumList" :key="album.id">
                  <div class="view-item" @click="preview1(album.id)">
                    <el-image :src="album.image" fit="cover" style="width:100%;height:100%">
                      <template #error>
                        <div class="image-slot">
                          用户还未添加图片
                        </div>
                      </template>
                    </el-image>
                    <div class="view-item-bottom">
                      {{album.name}}
                    </div>
                  </div>
                </van-grid-item>
              </van-grid>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { Grid, GridItem } from 'vant';
import { userId } from '../../utils/index';
import { minioUrl } from '../../base/index';
export default {
  name: 'GUserInfo',
  data () {
    return {
      isFan: false,
      userId: "",
      activeName: "1",
      minioUrl: minioUrl,
      user: {},
      textarea: "",
      worksList: [],
      albumList: [],
      num: {
        lookNum: 0,
        likeNum: 0,
        fanNum: 0,
      },
      MyId: userId,
      groupId: "1000",
    }
  },
  components: {
    VanGrid: Grid, VanGridItem: GridItem,
  },
  mounted () {
    document.documentElement.scrollTop = 0;
    window.addEventListener('scroll', this.handleScroll);
    this.userId = this.$route.params.userId;
    this.getMessageGroup(this.userId);
    this.getFanNum(this.userId);
    this.getUserVo();
    this.getWorksView(this.userId);
    this.getAlbumList(this.userId);
  },
  //销毁,否则跳到别的路由还是会出现
  unmounted () {
    console.log(3);
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scroll >= 390) {
        document.getElementsByClassName("el-tabs__nav-wrap")[0].style.cssText =
          "top: 0px;width: 100%;position: fixed;background-color: white;z-index: 1;";
      } else {
        document.getElementsByClassName("el-tabs__nav-wrap")[0].style.cssText = "";
      }
    },
    //添加粉丝
    addFan () {
      this.$axios.post("/fan/" + this.userId).then((res) => {
        if (res.flag) {
          this.isFan = true;

          this.num.fanNum = 1 + (this.num.fanNum - 0);
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
        }
      })
    },
    //删除粉丝
    deleteFan () {
      ElMessageBox.confirm(
        '确定要取关吗?',
        '取消关注',
        {
          confirmButtonText: '确认',
          cancelButtonText: '舍不得',
          type: 'warning',
        }
      )
        .then(() => {
          //取消
          this.$axios.delete("/fan/" + this.userId).then((res) => {
            if (res.flag) {
              this.isFan = false;
              this.num.fanNum = this.num.fanNum - 1;
              ElMessage({
                message: res.msg,
                grouping: true,
                type: 'success',
                duration: 2000,
              })
            }
          })
        })
        .catch(() => {
        });
    },
    //获取用户信息
    getUserVo () {
      if (this.userId.length !== 19) this.userId = "";
      this.$axios.get("/user/uservo/" + this.userId)
        .then((res) => {
          if (res.flag) {
            this.user = res.data;
            this.userId = res.data.id;
          }
          return res;
        })
        .then((res) => {
          if (res.flag) {
            this.$axios.get("/fan/isfan/" + res.data.id).then((res) => {
              if (res.flag) {
                this.isFan = res.data;
              }
            })
          }
        })
    },
    //获取作品信息
    getWorksView (userId) {
      this.$axios.get("/works/worksview/works/" + userId).then(res => {
        if (res.flag) {
          for (var key in res.data) {
            if (res.data[key].permission == 1) {
              this.worksList.push(res.data[key])
            }
          }
        }
      })
    },
    //获取相册信息
    getAlbumList (userId) {
      this.$axios.get("/album/permission1/" + userId).then(res => {
        if (res.flag) {
          this.albumList = res.data;
        }
      })
    },
    //获取关注信息
    getFanNum (userId) {
      this.$axios.get("/fan/num/" + userId).then((res) => {
        if (res.flag) {
          this.num = res.data;
        }
      })
    },
    getMessageGroup (userId) {
      this.$axios.get("/message/group/" + userId).then(res => {
        if (res.flag) {
          if (res.data != null) {
            this.groupId = res.data.groupId;
          }
        }
      })
    },
    //查看作品详情
    preview (id) {
      //跳转详情
      this.$router.push({ name: '作品详情', params: { worksId: id } });
    },
    //查看相册图片详情
    preview1 (id) {
      this.$router.push("/photo/" + id);
    },
    toMessageInfo () {
      this.$router.push("/messageinfo/" + this.groupId + "/" + this.user.id + "/1");
    },
    load () {
      console.log("11");
    },
    toLikeFan () {
      this.$router.push("/user/likefan/" + this.userId);
    }
  },
}
</script>

<style scoped>
.container {
}

.user-info {
  padding-top: 10px;
  line-height: 70px;
  padding-left: 10px;
}
.user-head {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  float: left;
}
.headimage {
  margin-top: 5px;
  margin-left: 5px;
}
.user-name {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 70px;
  margin-left: 10px;
  float: left;
  font-size: 20px;
  font-weight: bold;
}
.user-copyname {
}
.content-one {
  margin-top: 10px;
  text-align: center;
  width: 100%;
  height: 60px;
}
.content-two {
  margin-left: 5px;
  margin-right: 5px;
  padding-bottom: 10px;
  width: calc(100% - 10px);
  background-color: white;
  border-radius: 10px;
}
.content-two .tag {
  margin-left: 10px;
}
.row-button {
  text-align: center;
}
.user-personality {
  height: 100px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 个人简介边框 */
.container >>> .el-textarea__inner {
  border: 0;
  resize: none;
  box-shadow: none;
  font-size: 16px;
  padding: 10px;
  background-color: white;
  color: black;
}
/* 作品相册标签字体大小 */
.container >>> .el-tabs__item {
  font-size: 18px;
}
.button1 {
  width: 120px;
}
/* .container >>> .el-tabs__nav-wrap {
  top: 0px;
  width: 100%;
  position: fixed;
  background-color: white;
  z-index: 1;
} */
.view-item {
  width: 100%;
  height: 150px;
  position: relative;
}
.view-item-bottom {
  position: absolute;
  color: white;
  padding-left: 5px;
  height: 25px;
  width: calc(100% - 5px);
  line-height: 25px;
  font-size: 12px;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.tulin-like,
.tulin-view {
  font-size: 12px;
}
.image-slot {
  font-size: 12px;
  text-align: center;
  line-height: 100px;
}
.container >>> .van-grid-item__content {
  padding: 0;
}
</style>